<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录</title>
    <!-- 样 式 文 件 -->
    <link rel="stylesheet" href="/static/admin/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/static/admin/admin/css/other/login.css"/>
</head>
<!-- 代 码 结 构 -->
<body background="/static/admin/admin/images/background.svg" style="background-size: cover;">
<form class="layui-form" action="javascript:void(0);">
    <div class="layui-form-item">
        <img class="logo" src="/static/admin/admin/images/logo.png"/>
        <div class="title">Pear Admin</div>
        <div class="desc">
            明 湖 区 最 具 影 响 力 的 设 计 规 范 之 一
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-wrap">
            <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-cellphone"></i>
            </div>
            <input type="text" name="mobile" value="" lay-verify="required" placeholder="手机号"
                   lay-reqtext="请填写手机号" autocomplete="off" class="layui-input" lay-affix="clear">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-wrap">
            <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-password"></i>
            </div>
            <input type="password" name="password" value="" lay-verify="required" placeholder="密   码"
                   lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-row">
            <div class="layui-col-xs7">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-vercode"></i>
                    </div>
                    <input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码"
                           lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
            </div>
            <div class="layui-col-xs5">
                <div style="margin-left: 10px;">
                    <img src="https://www.oschina.net/action/user/captcha" width="100" id="captchaImage">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
        <a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
    </div>
    <div class="layui-form-item">
        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
    </div>
</form>
<!-- 资 源 引 入 -->
<script src="/static/admin/component/layui/layui.js"></script>
<script src="/static/admin/component/pear/pear.js"></script>
<script src="/static/js/login.js"></script>
<script>
  function getCookie(name) {
    let matches = document.cookie.match(new RegExp(
        '(?:^|; )' + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') +
        '=([^;]*)',
    ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
  }

  function generateUUID() {
    var d = new Date().getTime();
    if (window.performance && typeof window.performance.now === 'function') {
      d += performance.now(); //use high-precision timer if available
    }
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,
        function(c) {
          var r = (d + Math.random() * 16) % 16 | 0;
          d = Math.floor(d / 16);
          return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
        });
  }

  layui.use(function() {
    var form = layui.form;
    var $ = layui.$;
    var button = layui.button;
    var popup = layui.popup;

    let image_code_uuid = generateUUID();
    document.getElementById(
        'captchaImage').src = `/admin/get_captcha?image_code_uuid=${image_code_uuid}`;

    $('#captchaImage').click(function() {
      image_code_uuid = generateUUID();
      document.getElementById(
          'captchaImage').src = `/admin/get_captcha?image_code_uuid=${image_code_uuid}`;
    });

    // 登 录 提 交
    form.on('submit(demo-login)', function(data) {
      var field = data.field; // 获取表单字段值
      field['image_code_uuid'] = image_code_uuid;
      fetch(`/admin/login${location.search}`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(field),
      }).then(function(response) {
        return response.json();
      }).then(function(ret) {
        if (!ret.code) {
          // 登录成功回调到首页，或者跳转到被拦截的页面
          // 存储到本地的 localStorage
          localStorage.setItem('access_token', ret.access_token);

          // .next
          layer.msg(ret.message, {icon: 1});
          setTimeout(function() {
            // 如果有 next 就调整过去
            location.href = ret?.next ? ret.next : '/';
          }, 2000);
        } else {
          layer.msg(ret.message, {icon: 2});
        }
      });
      return false; // 阻止默认 form 跳转
    });
  });
</script>

</body>
</html>
